<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
      <el-tab-pane
        v-for="item in list"
        :key="item.categoryId"
        :label="item.categoryName"
        :name="item.categoryId.toString()"
      >
        <el-table :data="tableData" style="width: 80%">
          <el-table-column prop="shopName" label="店铺名称" width="180">
          </el-table-column>
          <el-table-column prop="prodName" label="商品名称" width="180">
          </el-table-column>
          <el-table-column prop="price" label="价格"> </el-table-column>
        </el-table>
      </el-tab-pane>
      
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
        tableData: [],
      list: [],
      activeName: "second",
    };
  },
  created() {
    this.getSort();
  },
  methods: {
    //   handleClick(tab, event) {
    //     console.log(tab, event);
    //   },
    handleClick() {
      console.log(this.activeName);
      this.$axios
        .get(
          "http://api.app.yami.byesame.com/prod/pageProd?categoryId=" +
            this.activeName
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == "00000") {
            this.tableData = res.data.data.records;
          }
        });
    },
    getSort() {
      this.$axios
        .get("http://api.app.yami.byesame.com/category/categoryInfo")
        .then((res) => {
          console.log(res);
          if (res.data.code == "00000") {
            this.list = res.data.data;
          }
        });
    },
  },
};
</script>

<style>
</style>